@import "vars";

@zIndex: @side-z-index;
/*左侧样式*/
.fa-side {
    position: absolute;top: 50px;left: 0px;bottom: 0px; width: 200px; z-index: @zIndex; background-color: #393D49; color: white;box-shadow: 2px 8px 8px 0 rgb(29, 35, 41 , 5%);
    .fa-nav-box {/*导航*/
        overflow: scroll;height: 100%;width: 100%;display: block;
        .fa-nav {display: none;}
        &.more-add .fa-nav-dir:after {content: "\e654";font-family: layui-icon !important;}
        &.more-down .fa-nav-dir:after {content: "\e61a";font-family: layui-icon !important;}
        &.more-add .fa-nav-dir.fa-nav-itemed:after { content: "-"; }
        &.more-down .fa-nav-dir.fa-nav-itemed:after {content: "\e61a"; }
    }
    .fa-nav{
        /*item 默认样式*/
        .fa-nav-dir,
        .fa-nav-item{height: 40px;line-height: 40px;text-decoration: none;cursor: pointer;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;text-align: left;}
        .fa-nav-dir em,
        .fa-nav-item em{width: 16px;padding-right: 5px;display: inline-block;}
        .fa-nav-dir:before,
        .fa-nav-item:before { content: ""; visibility: hidden; float: left; width: 2px; height: 0px; background-color: #ffffff;  position: absolute; left: 0px; }
        .fa-nav-dir:after {position: relative;float: right;right: 16px;content: "\e625";font-family: layui-icon !important;font-style: normal;-webkit-font-smoothing: antialiased;transform: rotate(90deg);}
        /*item悬停、选中后的样式*/
        .fa-nav-dir.fa-nav-itemed:after { transform: rotate(0deg);  }
        .fa-nav-dir:hover,
        .fa-nav-item.fa-nav-itemed,
        .fa-nav-item:hover {background-color: #dd4b39;color: white;}
        .fa-nav-dir:hover:before,
        .fa-nav-item.fa-nav-itemed:before,
        .fa-nav-item:hover:before { visibility: visible; height: 40px; }
        .fa-nav-dir.fa-nav-itemed + .fa-nav {display: block;}
    }
    /*item 1、2、3、4、5级导航缩进*/
    .fa-nav .fa-nav-dir,
    .fa-nav .fa-nav-item {padding-left: 20px;}
    .fa-nav .fa-nav .fa-nav-dir,
    .fa-nav .fa-nav .fa-nav-item {padding-left: 30px;}
    .fa-nav .fa-nav .fa-nav .fa-nav-dir,
    .fa-nav .fa-nav .fa-nav .fa-nav-item {padding-left: 50px;}
    .fa-nav .fa-nav .fa-nav .fa-nav .fa-nav-dir,
    .fa-nav .fa-nav .fa-nav .fa-nav .fa-nav-item {padding-left: 70px;}
    .fa-nav .fa-nav .fa-nav .fa-nav .fa-nav .fa-nav-dir,
    .fa-nav .fa-nav .fa-nav .fa-nav .fa-nav .fa-nav-item {padding-left: 90px;}
}